$.extend({
    image: function () {
        var id = (Math.random() * 100000).toFixed();
        var aimage_index = $(this).index();
        $('body').on('click', 'img', function (e) {
            var src = $(this).attr('src');
            var html = `
                        <div class="see-img-back img${id}">
                            <div class="see-img-left"></div>
                            <img class="see-img-con-img" id="img${id}" src="${src}" alt="">
                            <div class="see-img-right"></div>
                        </div>`;
            $('body').append(html);
            aimage_index = $('img').index(e.target)
            console.log(aimage_index)
        })
        $('body').on('click', '.see-img-back', function () {
            $(this).remove();
        })
        $('body').on('click', '.see-img-left', function (e) {
            e.stopPropagation();
            let count = $('img').length;
            aimage_index--;
            if (aimage_index < 0)
                aimage_index = count - 1;
            var src = $('img').eq(aimage_index).attr('src');
            $('#img' + id).attr('src', src);
        })
        $('body').on('click', '.see-img-right', function (e) {
            e.stopPropagation();
            let count = $('img').length;
            aimage_index++;
            if (aimage_index > count - 1)
                aimage_index = 0;
            var src = $('img').eq(aimage_index).attr('src');
            $('#img' + id).attr('src', src);
        })
    },
    video: function (element) {
        var id = (Math.random() * 100000).toFixed();
        var aimage_index = $(this).index();
        $('body').on('click', element, function () {
            var src = $(this).data('src');
            var cover = $(this).data('cover');
            var html = `
                        <div class="see-img-back img${id}">
                            <div class="see-img-left"></div>
                            <video class="see-img-con-video" id="video${id}" src="${src}" poster="${cover}" controls>您的浏览器不支持</video>
                            <div class="see-img-right"></div>
                        </div>`;
            $('body').append(html);
        })
        $('body').on('click', '.see-img-back', function () {
            $(this).remove();
        })
        $('body').on('click', '.see-img-left', function (e) {
            e.stopPropagation();
            let count = $(element).length;
            aimage_index--;
            if (aimage_index < 0)
                aimage_index = count - 1;
            var src = $(element).eq(aimage_index).data('src');
            var cover = $(element).eq(aimage_index).data('cover');
            $('#video' + id).attr('src', src);
            $('#video' + id).attr('poster', cover);
        })
        $('body').on('click', '.see-img-right', function (e) {
            e.stopPropagation();
            let count = $(element).length;
            aimage_index++;
            if (aimage_index > count - 1)
                aimage_index = 0;
            var src = $(element).eq(aimage_index).data('src');
            var cover = $(element).eq(aimage_index).data('cover');
            $('#video' + id).attr('src', src);
            $('#video' + id).attr('poster', cover);
        })
    }
})